import { Component, OnInit, Input, Output, EventEmitter, HostBinding, HostListener, ChangeDetectionStrategy } from '@angular/core';
import { cardAnim } from '../../my-animations/card.animation';
@Component({
  selector: 'app-projectitem',
  templateUrl: './projectitem.component.html',
  styleUrls: ['./projectitem.component.scss'],
  animations: [
    cardAnim
  ],
  //ChangeDetectionStrategy.OnPush 不用检查当前组件树是否变化  除非 你告诉我  手动设置
  changeDetection:ChangeDetectionStrategy.OnPush
})
export class ProjectitemComponent implements OnInit {

  @Input() item: any;
  @Output() onInvite = new EventEmitter<void>();
  @Output() eidet = new EventEmitter<void>();
  @Output() delete = new EventEmitter<void>();

  // 绑定 card 动画  默认 out
  // HostBinding 将某一个值 绑定到属性上去
  @HostBinding('@card') cardState = "out";

  constructor() { }

  ngOnInit() {
  }

  // 监听 一个数组的事件  @HostListener('mouseenter',['$event,target'])
  @HostListener('mouseenter')
  onMouseEnter(){
    this.cardState = 'hover';
  }

  @HostListener('mouseleave')
  onMouseLeve(){
    this.cardState = 'out';
  }

  onInviteClick() {
    this.onInvite.emit();
  }
  onEidetClick() {
    this.eidet.emit()
  }
  onDelClick() {
    this.delete.emit();
  }
}
